<style type="text/less" lang="less" scoped>
@import url("./index.less");
</style>

<template>
  <el-container>
    <el-main class="content-main">
      <div class="ps-panel" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-list"></i>
          <span class="ps-panel-head-title">列表</span>
          <span class="query">
            <el-button type="primary" size="mini" @click="add"
              >添加语法</el-button
            >
          </span>
        </div>

        <div class="ps-panel-body">
          <el-table
            :data="tableData"
            size="small"
            highlight-current-row
            stripe
            style="width: 100%; margin-bottom: 10px"
          >
            <el-table-column prop="id" label="ID" width="50"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="is_enable" label="是否启用" width="100">
              <template slot-scope="scope">
                {{ scope.row["is_enable"] == 1 ? "启用" : "未启用" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="addtime"
              label="添加时间"
              width="150"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)"
                  >编辑</el-button
                >
                <el-button type="text" size="small" @click="del(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              v-if="paginations.total > 0"
              :page-size="paginations.pageSize"
              :layout="paginations.layout"
              :total="paginations.total"
              :current-page="paginations.pageIndex"
              @current-change="jump"
              style="text-align: right"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-main>

    <el-dialog
      title="语法"
      :visible.sync="grammarForm.visible"
      width="1200px"
      class="edit"
    >
      <iframe
        class="grammar-iframe"
        ref="grammar-iframe"
        src="structure_preview/index.html"
        @load="iframeLoad"
        hidefocus="true"
        frameborder="0"
        scrolling="auto"
        style="width: 100%; height: 590px"
      ></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button @click="grammarForm.visible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  name: "index",
  data: function () {
    return {
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 页显示多少条
        total: 0, // 总数
        layout: "total, prev, pager, next", // 翻页属性
      },
      tableData: [],
      grammarForm: {
        visible: false,
        id: 0,
        name: "",
        content: "",
        is_enable: 0,
      },
      grammarIframe: null,
    };
  },
  methods: {
    jump(i) {
      if (i === undefined) {
        i = this.paginations.pageIndex;
      } else {
        this.paginations.pageIndex = i;
      }
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/grammarModelsList",
        method: "get",
        data: { page: i, number: this.paginations.pageSize },
        succeed: (res) => {
          this.tableData = res.rows;
          this.paginations.total = res.total;
        },
      });
    },
    add() {
      this.grammarForm.visible = true;
      this.grammarForm.id = 0;
      this.grammarForm.name = "";
      this.grammarForm.content = "";
      this.grammarForm.is_enable = 0;

      const timer = setInterval(() => {
        const iframe = this.$refs["grammar-iframe"];
        if (iframe) {
          clearInterval(timer);
          const iframeDoc = document.all
            ? iframe.contentWindow.document
            : iframe.contentDocument;
          iframeDoc.getElementById("inputText").value = "";
          iframeDoc.getElementById("xml_area").value = "";
          iframeDoc.getElementById("enable").checked = false;
          iframeDoc.getElementById("mask").style.display = "block";
          iframeDoc.getElementById("analysisPanel").style.display = "none";
          iframeDoc.getElementById("usingManual").style.display = "block";
          iframeDoc.getElementById("loadingTag").style.display = "none";
          iframe.contentWindow.labelExplanationPanel.closePanel();
          iframe.contentWindow.labelExplanationPanel._responseBtnHide();
        }
      }, 200);
    },
    edit(row) {
      this.grammarForm.visible = true;
      this.grammarForm.id = row.id;
      this.grammarForm.name = row.name;
      this.grammarForm.content = row.content;
      this.grammarForm.is_enable = row.is_enable;

      const timer = setInterval(() => {
        const iframe = this.grammarIframe;
        if (iframe) {
          clearInterval(timer);
          const iframeDoc = document.all
            ? iframe.contentWindow.document
            : iframe.contentDocument;
          iframeDoc.getElementById("inputText").value = row.name;
          iframeDoc.getElementById("xml_area").value = row.content;
          iframeDoc.getElementById("enable").checked = row.is_enable
            ? true
            : false;
          iframeDoc.getElementById("mask").style.display = "none";
          iframeDoc.getElementById("analysisPanel").style.display = "block";
          iframeDoc.getElementById("usingManual").style.display = "none";
          iframe.contentWindow.labelExplanationPanel.closePanel();
          iframe.contentWindow.labelExplanationPanel._responseBtnAppear();
          iframe.contentWindow.$("#load-local-xml-btn").trigger("click");
        }
      }, 200);
    },
    iframeLoad() {
      this.grammarIframe = this.$refs["grammar-iframe"];
    },
    save() {
      const timer = setInterval(() => {
        const iframe = this.$refs["grammar-iframe"];
        if (iframe) {
          clearInterval(timer);
          const iframeDoc = document.all
            ? iframe.contentWindow.document
            : iframe.contentDocument;
          this.grammarForm.name = iframeDoc.getElementById("inputText").value;
          this.grammarForm.content = iframeDoc.getElementById("xml_area").value;
          this.grammarForm.is_enable = iframeDoc.getElementById("enable")
            .checked
            ? 1
            : 0;

          if (this.grammarForm.name === "" || this.grammarForm.content === "") {
            this.$message.warning("请输入分析语句并分析");
            return;
          }

          if (this.grammarForm.id == 0) {
            this.$store.dispatch("ajaxSetting", {
              // this.$store.dispatch("ajax", {
              url: "/api/grammarModelAdd",
              method: "post",
              data: {
                name: this.grammarForm.name,
                content: this.grammarForm.content,
                is_enable: this.grammarForm.is_enable,
              },
              succeed: () => {
                this.jump();
                this.$message.success("保存成功");
                this.grammarForm.visible = false;
              },
            });
          } else {
            this.$store.dispatch("ajaxSetting", {
              // this.$store.dispatch("ajax", {
              url: "/api/grammarModelEdit",
              method: "put",
              data: {
                id: this.grammarForm.id,
                name: this.grammarForm.name,
                content: this.grammarForm.content,
                is_enable: this.grammarForm.is_enable,
              },
              succeed: () => {
                this.jump();
                this.$message.success("保存成功");
                this.grammarForm.visible = false;
              },
            });
          }
        }
      }, 200);
    },
    del(row) {
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/grammarModelDel",
        method: "put",
        data: [row.id],
        succeed: () => {
          this.jump();
          this.$message.success("删除成功");
          this.grammarForm.visible = false;
        },
      });
    },
  },
  mounted: function () {
    this.jump(1);
  },
};
</script>